<!DOCTYPE html >
<html>
<head>
<meta name="Generator" content="TPshop v1.1" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>会员采购榜</title> 
<meta http-equiv="keywords" content="{$tpshop_config['shop_info_store_keyword']}" />
<meta name="description" content="{$tpshop_config['shop_info_store_desc']}" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<link rel="stylesheet" type="text/css" href="__STATIC__/css/index.css"/>
<link rel="stylesheet" href="/Public/layui/css/layui.css"/>
<script type="text/javascript" src="/Public/layui/layui.js"></script>
<style type="text/css">
*{font-size:18px;}
.list{width:95%;margin:auto;margin-top:20px;height: 500px;overflow:scroll;background:#fff;z-index:2;border-radius:0 0 16px 16px}
.list .box{width:98%;height:56px; display:flow-root;/*background:linear-gradient(to right,{$longhu['longhu_j1']},{$longhu['longhu_j2']});box-shadow:1px 0px 8px #00000047;*/float:right;margin-bottom:15px;}
.list div,img{float:left;}
.list .head{width:50px;height:50px; border-radius:50px;position:static;margin-left:-30px;}
.list b{font-size:26px;}
.top,.name,.tel{color:{$longhu.ziti_bg};margin-left:2%;font-weight:bold;margin-top:22px;overflow: hidden;}
.top{width:20%;margin-top:16px}.name{width:20%;}.tel{width:32%;margin-left:8px;}
.dibu{width:92%;margin:auto;margin-top:20px;background:#fff;border-radius:16px;padding:8px;line-height:35px;margin-bottom:50px}
.dibu b{color:#FF2939}.dibu span{font-size:15px}

.top1{
    width: 100%;
    margin-top: -180px;
    position: absolute;
}
.top1 img{ width:40px;height:40px;border-radius:40px;}
.aa0 img{margin:18% 32%  36px}.aa1 img{margin:18% 33%  36px}.aa2 img{margin:18% 35%  36px}
.top1 .aa0{background:url(/Public/usertop/aa0.png) no-repeat;background-size:100%;width:30%;height:180px;float:left;margin-left:2.2%}
.top1 .aa1{background:url(/Public/usertop/aa1.png) no-repeat;background-size:100%;width:30%;height:180px;float:left;margin-left:2.2%;margin-top:-20px}
.top1 .aa2{background:url(/Public/usertop/aa2.png) no-repeat;background-size:100%;width:30%;height:180px;float:left;margin-left:2.2%}
.top1 .sj{font-weight:bold;text-align:center}
.jh1{text-align:center;margin-top:6px}
.jh1 span,.jh1 b{font-size:13px;padding:5px;color:#fff}
.jh1 span{width:45%; height:25px;border-radius:5px;background:#912CF1;font-weight:normal}
.jh1 b{width:45%;height:25px;border-radius:5px;background:#3FA9F4}



.xuzhi{width:46%;margin-left:2%}
.lipin{width:46%;margin-left:3%}#xuzhi,#lipin{display:none}

.top2{
    width: 100%;
    margin-top:10px;
}
.top2 b{font-size:13px;color:#fff;display:block;margin-top:28px;margin-right:15px}
.top2 .b1{background:url(/Public/usertop/b1.png) no-repeat;background-size:100%;width:32%;height:60px;float:left;margin-left:1.2%;text-align:right}
.top2 .b2{background:url(/Public/usertop/b2.png) no-repeat;background-size:100%;width:32%;height:60px;float:left;margin-left:1.2%;text-align:right}
.top2 .b3{background:url(/Public/usertop/b3.png) no-repeat;background-size:100%;width:32%;height:60px;float:left;margin-left:1.2%;text-align:right}
.bei{width:33px;margin-top:20px;margin-left:5px}
body .layui-layer-rim{border:6px solid #ff5722;border-radius:16px;overflow:hidden;box-shadow:aliceblue}
body .layui-layer-page .layui-layer-content{padding:10px}body .layui-layer-title{text-align:center;font-size:18px;font-weight:bold}
</style>
</head>
<body>
<div id="page" class="showpage" style="background:{$longhu['longhu_bg']};">
<img src="https://xjt.zczmer.com{$longhu['longhu_pic']}" width="100%" />
<div style="clear:both"></div>
<div class="top1">
    <div class="aa0">
        <if condition="!$user_list[1]['head_pic'] || $user_list[1]['head_pic'] == 'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132'">
            <img src="/Public/images/mylogo.jpg" class="head"/>
            <else/>
            <img src="{$user_list[1]['head_pic']}" />
        </if>
        <div class="sj">{:substr_replace(substr_replace($user_list[1]['mobile'], '****', 3, 4),'*',9,1)}</div>
        <div class="jh1">
            <b>金额</b>
            <span>￥{$user_list[1]['xiaoshou']}</span>
        </div>
        </div>
    <div class="aa1">
        <if condition="!$user_list[0]['head_pic'] || $user_list[0]['head_pic'] == 'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132'">
            <img src="/Public/images/mylogo.jpg" class="head"/>
            <else/>
            <img src="{$user_list[0]['head_pic']}" />
        </if>
        <div class="sj">{:substr_replace(substr_replace($user_list[0]['mobile'], '****', 3, 4),'*',9,1)}</div>
        <div class="jh1">
            <b>金额</b>
            <span style="background:#FCAF1D">￥{$user_list[0]['xiaoshou']}</span>
        </div>
        </div>
    <div class="aa2">
        <if condition="!$user_list[2]['head_pic'] || $user_list[2]['head_pic'] == 'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132'">
            <img src="/Public/images/mylogo.jpg" class="head"/>
            <else/>
            <img src="{$user_list[2]['head_pic']}" />
        </if>
        <div class="sj">{:substr_replace(substr_replace($user_list[2]['mobile'], '****', 3, 4),'*',9,1)}</div>
        <div class="jh1">
            <b style="background:#FF3C71">金额</b>
            <span style="background:#30C599">￥{$user_list[2]['xiaoshou']}</span>
        </div>
        </div>
    
</div>

<div style="">
<img src="/Public/usertop/a1.png" class="xuzhi"/>
<img src="/Public/usertop/a2.png" class="lipin"/>
</div>

<div style="clear: both;"></div>
<div class="top2">
    <div class="b1"  style="display: flex;justify-content: space-between">
        <b style="margin-left: 10px;">{$mytop}</b>
        <b>￥{$myxiaoshou}</b>
        </div>
    <div class="b2">
        <b>￥{$chaju1}</b>
        </div>
    <div class="b3">
        <b>￥{$chaju2}</b>
        </div>
    
</div>

<div style="clear: both;"></div>

<div style="text-align:center;font-weight:bold;color:#fff;margin-top:15px">全会员榜排名情况</div>
<img src="/Public/usertop/b.png" style="z-index:1;width:100%"/>
	<div class="list" id="list">
		<div id="bb" style="width:100%;margin-top:80px;">
		<?php
		
		foreach($user_list as $key=>$v){
			$i=$key+1;$img='';
			if($i<=3){
				$img=$i;
				$price=$v['xiaoshou'];
			}else{
                if(($i % 10) == 0){
                    $price=$v['xiaoshou'];
                }else{
                    $price='****';
                }

			}
		?>
			<div class="box" id="box">
			 
			<div class="top"><b>{$i}</b></div>
			
			<if condition="!$v['head_pic'] || $v['head_pic'] == 'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132'">
			    <img src="/Public/images/mylogo.jpg" class="head"/> 
			<else/>
		    	<img src="{$v['head_pic']}" class="head"/> 
			</if>
			<!--<div class="name">{:mb_substr($v['nickname'],0,1,'utf-8')."**"}</div>-->
			<div class="tel">{:substr_replace(substr_replace($v['mobile'], '****', 3, 4),'*',9,1)}</div>
			<div class="name" style="color:#ff2d3b">￥{$price}</div>
			<img src="/Public/usertop/top{$img}.png" class="bei"/>
			</div>
			<div style="clear: both;"></div>
		<?php
		}
		?>
		<div style="clear: both;height:180px;"></div>
		</div>
	</div>
	<div style="clear: both;"></div>
	<div class="dibu">
	    <b>备注：</b><br/>
	    <span>
活动期间，进货金额和排名按照以收到货款为准，
期间产生退货，系统自动减掉</span>
	</div>
</div>
<div id="xuzhi">{$xuzhi}</div>
<div id="lipin">{$lipin}</div>
<script type="text/javascript">
    layui.use(['form', 'layedit', 'laydate','layer','rate'], function () {
      var form = layui.form,layer = layui.layer,layedit = layui.layedit,rate = layui.rate,laydate = layui.laydate,$ = layui.jquery;
      
      	
    $(".xuzhi").click(function(){
        var neirong=$('#xuzhi').text();//+myrel;
        layer.open({
            type: 1,
            shadeClose: true, //点击遮罩关闭
            title:'活动须知',
            skin: 'layui-layer-rim', //加上边框
            area: ['80%', '500px'], //宽高
            content: neirong
        });
    });
    $(".lipin").click(function(){
        var neirong=$('#lipin').text();//+myrel;
        layer.open({
            type: 1,
            shadeClose: true, //点击遮罩关闭
            title:'礼品详情',
            skin: 'layui-layer-rim', //加上边框
            area: ['80%', '500px'], //宽高
            content: neirong
        });
    });
	  
});
     var slide=document.getElementById("list");
     var slide1=document.getElementById("box");
	 var bb=document.getElementById("bb");
	 console.log(bb.offsetHeight);
     function Marquee(){ //console.log(bb.offsetHeight-slide.scrollTop);
		 //if(slide1.offsetTop-slide.scrollTop<=0){
		 if(bb.offsetHeight-slide.scrollTop<=500){
			 slide.scrollTop=5;
		 }else{
             slide.scrollTop++;
         }
     }
     var gd=setInterval(Marquee,50);
	
	 bb.addEventListener("touchstart",function(){
	     clearInterval(gd);
	});
	
	bb.addEventListener("touchend",function(){
	    gd = setInterval(Marquee, 50);
	});

</script>
</body>
</html>